<template>
  <el-container style="height: 100vh">
    <!-- 顶部菜单 -->
    <el-header style="padding: 0">
      <el-menu
        mode="horizontal"
        background-color="#409eff"
        text-color="#fff"
        active-text-color="#ffd04b"
        :ellipsis="false"
      >
        <el-menu-item index="1">首页</el-menu-item>
        <el-menu-item index="2">笔记</el-menu-item>
        <el-menu-item index="3">关于</el-menu-item>

        <!-- 搜索框 -->
        <div style="margin-left: auto; margin-right: 20px; display: flex; align-items: center">
          <el-input
            v-model="keyword"
            placeholder="搜索笔记 Ctrl+K"
            clearable
            style="width: 240px"
          />
        </div>
      </el-menu><!-- 博客首页 -->
<template>
  <div class="page">
    <header class="top">
      <!-- ellipsis 是否省略 | mode 默认垂直模式，horizontal为水平模式-->
      <el-menu class="menu" mode="horizontal" :ellipsis="false">
        <el-menu-item style="margin-right: auto;">
          <img class="logo" src="@/assets/favicon.png">
          前端笔记
        </el-menu-item>
        <!-- <el-menu-item>基础与入门</el-menu-item> -->
        <el-menu-item>
          <RouterLink to="/home">基础与入门</RouterLink>
        </el-menu-item>
        <!-- <el-menu-item>HTML</el-menu-item> -->
        <el-menu-item>
          <RouterLink to="/">HTML</RouterLink>
        </el-menu-item>

        <el-menu-item>JavaScript</el-menu-item>
        <el-menu-item>网页布局</el-menu-item>
        <el-menu-item>Git</el-menu-item>
        <el-menu-item>帮助中心</el-menu-item>
      </el-menu>
	  <RouterView />

    </header>
    
    <!-- <HomePage/> -->
    <footer class="VPFooter">
      <div class="container">
        <p class="message">
          工信部备案号：<a target="_blank" href="https://beian.miit.gov.cn/">
            黔ICP备2023003546号-1
          </a>
        </p>
        <p class="copyright">
          <img style="display: inline-block;vertical-align: middle;margin-top: -3px;margin-right:2px" src="@/assets/beian.png">
          贵公网安备：
          <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=52052102000082" style="display:inline-block;text-decoration:none;line-height:20px;">
            <span style="color:#939393;"></span>
            52052102000082号
          </a>
        </p>
      </div>
    </footer>
  </div>
  <el-backtop :right="100" :bottom="100" />
</template>
<script setup>
  // import HomePage from '@/components/HomePage.vue'
</script>
<style>
.page {
  font-size: 16px;
  --eva-max-width: 1440px;
}

.top {
  overflow: hidden;
  position: sticky;
  top: 0;
  z-index: 100;
}

.logo {
  margin-right: 5px;
}

.menu {
  padding-left: calc((100% - var(--eva-max-width)) / 2);
  padding-right: calc((100% - var(--eva-max-width)) / 2);
}

.body {
  margin: 0 auto 128px;
  box-sizing: border-box;
  padding: 0 48px;
}

.body .container {
  max-width: calc(var(--eva-max-width) - 240px);
  margin: 0 auto;
}

.main {
  position: relative;
  z-index: 10;
  order: 2;
  flex-grow: 1;
  flex-shrink: 0;
}

.h1 {
  display: flex;
  flex-direction: column;
}

.btn-group {
  display: flex;
  flex-wrap: wrap;
  margin: -6px;
  padding-top: 24px;
  padding-right: 5px;
  justify-content: center;
  --el-font-weight-primary: bold;
}

.action {
  flex-shrink: 0;
  padding: 6px;
}

.image {
  order: 1;
  display: block;
  margin: -76px -24px -48px;
}

ol {
	padding-inline-start: 20px;
}

.tip {
	box-sizing: border-box;
  margin-inline-start: -1em;
  border-left: 2px solid #e2e2e3;
  padding-left: 16px;
  transition: border-color .5s;
  color: #67676c;
}


.VPFooter {
  padding: 32px;
  position: relative;
  border-top: 1px solid #e2e2e3;
  padding: 32px 24px;
  background-color: #fff;
  text-align: center;
}

.row {
  display: flex;
  flex-direction: column;
  padding-top: 80px;
  padding-bottom: 64px;
  text-align: center;
}

.image {
  margin: -68px -24px -48px;
}

.image-container {
  position: relative;
  margin: 0 auto;
  width: 392px;
  height: 392px;

}

.card-col {
  margin-bottom: 8px;
}

.card {
  box-sizing: border-box;
  border: 1px solid var(--vp-c-bg-soft);
  border-radius: 12px;
  height: 100%;
  background-color: #f6f6f7;
  padding: 24px;
}

.h3 {
  font-weight: bold;
}

.image-container img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: translate(-50%, -50%);
  max-width: 256px;
  max-height: 256px;
}

@media (min-width: 960px) {
  .VPFooter {
    padding: 32px;
  }

  .body {
    /* padding: 0; */
  }

  .row {
    flex-direction: row;
  }

  .main {
    max-width: 592px;
    order: 1;
    width: calc((100% / 3) * 2);
  }

  .btn-group {
    justify-content: flex-start;
  }

  .image {
    flex-grow: 1;
    order: 2;
    margin: 0;
    min-height: 100%;
  }

  .image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    transform: translate(-32px, -32px);
  }

  .image-container img {
    max-width: 320px;
    max-height: 320px;
  }

  .row {
    text-align: left;
  }
}
</style>
    </el-header>

    <el-container>
      <!-- 左侧导航 -->
      <el-aside width="220px">
        <el-menu
          :default-openeds="['1', '2']"
          router
        >
          <el-sub-menu index="1">
            <template #title>基础与入门</template>
            <el-menu-item index="/html">HTML</el-menu-item>
            <el-menu-item index="/css">CSS</el-menu-item>
            <el-menu-item index="/js">JavaScript</el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="2">
            <template #title>框架与工具</template>
            <el-menu-item index="/vue">Vue</el-menu-item>
            <el-menu-item index="/mp">微信小程序</el-menu-item>
            <el-menu-item index="/git">Git</el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-aside>

      <!-- 右侧内容 -->
      <el-main>
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import { ref } from 'vue'

const keyword = ref('')
</script>

<style scoped>
/* 让页面撑满屏幕 */
html, body, #app {
  margin: 0;
  height: 100%;
}
</style>